<template>
	<div>
		<headerTop></headerTop>
		<div class="table-container">
		<el-table
		    ref="singleTable"
		    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
		    highlight-current-row
			border
		    style="width: 100%">
		    <el-table-column
		      prop="user_name"
		      label="姓名"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="create_time"
		      label="注册日期"
		      width="220">
		    </el-table-column>
		    <el-table-column
		      prop="city"
		      label="地址"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="admin"
		      label="权限">
		    </el-table-column>
		  </el-table>
		  </div>
		  <div class="Pagination" style="text-align: left;margin-top: 10px;">
		      <el-pagination
		        @current-change="handleCurrentChange"
		        :current-page="currentPage"
		        layout="total, prev, pager, next"
		        :total="tableData.length">
		      </el-pagination>
		  </div>
	</div>
</template>

<script>
	import headerTop from '../../../components/headerTop.vue'
	export default {
		data(){
			return{
				tableData: [{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},{
					user_name: '李伟',
					create_time: '2022/03/14',
					city: '南京',
					admin: '管理员'
				},],
				        currentPage: 1, // 当前页码
				        pageSize: 10 // 每页的数据条数
			}
		},
		components:{
			headerTop
		},
		methods:{
			//每页条数改变时触发 选择一页显示多少行
			     handleSizeChange(val) {
			         console.log(`每页 ${val} 条`);
			         this.currentPage = 1;
			         this.pageSize = val;
			     },
			     //当前页改变时触发 跳转其他页
			     handleCurrentChange(val) {
			         console.log(`当前页: ${val}`);
			         this.currentPage = val;
			     }
		}
	}
</script>

<style lang="scss">
.table-container{
	padding: 20px;
}
</style>
